<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  用户名：<input type="text" value="张三"> <br>
  密码：  <input type="password" value="666"> <br>
  性别：  <input type="radio" name="sex" id="F" value="男">男
          <input type="radio" name="sex" id="M" value="女" checked>女 <br>
  爱好： 
        唱歌 <input type="checkbox" name="hobby" id="" value="唱歌"> 
        跳舞   <input type="checkbox" name="hobby" id="" value="跳舞" checked><br>
  班级：
 <select name="classname" id="">
    <option value="1班">1班</option>
    <option value="2班">2班</option>
    <option value="3班">3班</option>
    <option value="4班">4班</option>
  </select> <br>
  <button disabled>点击</button>
  <script>
    // 1. 文本输入框 值和类型
    const ipt = document.querySelector('input')
    console.log(ipt.value);

    // 2. 密码输入框
   document.querySelector('[type="password"]').type='button'
    // 3. 单选框     
    // 3.1 checked属性 修改选中状态
    document.querySelector('[type="radio"]')[0]=true;

    // 3.2 那如何获取选中状态的对象
const boxs=document.querySelectorAll('[type="checkbox"]')
    // 4. 复选框
    for (let i = 0; i<boxs.length;i++){
      boxs[i].checked=true
    }
        
    // 5. 下拉框
   document.querySelectorAll('option')[2].selected=true;

    // 6. 按钮 禁用与启用
    document.querySelector('button').disabled=false;
    

  </script>
</body>

</html>